<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>插槽</title>
        <script src="../public/vue2.7.14-dev.js"></script>
    </head>
    <body>
        <!-- 
            1.插槽内可以包含任何模板代码
            2.如果 <navigation-link> 的 template 中没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。
            3.后备内容:有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。
         -->

        <div id="app">
            <!--
                编译作用域: 当你想在一个插槽中使用数据时,该插槽跟模板的其它地方一样可以访问相同的实例 property (也就是相同的“作用域”)，
                而不能访问 <navigation-link> 的作用域。例如 url 是访问不到的
             -->
            <navigation-link url="/profile">
                Your Profile++{{name}}
              </navigation-link>
        </div>

        <script>
        Vue.component('navigation-link',{
            template:`
            <a
            v-bind:href="url"
            class="nav-link">
            <slot>hello 这里什么也没有！</slot>
            </a>
            `,
            props:['url']
        })

        new Vue({
            el:'#app',
            data(){
                return{
                    name:"xiaoyu"
                }
            }
        })
    </script>
    </body>
</html>